<template>
  <div class="app-container">
    <div ref="echartsRef" style="width: 100%; height: 800px"></div>
  </div>
</template>

<script setup name="Items">
import {
  listItems,
  getItems,
  delItems,
  addItems,
  updateItems,
} from "@/api/items/items";
import { listOrders } from "@/api/orders/orders";
import { listDishes } from "@/api/dishes/dishes";
import * as echarts from "echarts";
import { onMounted } from "vue";
import { listUser, addUser, updateUser, delUser } from "@/api/system/user";

const { proxy } = getCurrentInstance();

const itemsList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    orderId: null,
    dishId: null,
    quantity: null,
    price: null,
  },
  rules: {
    quantity: [
      { required: true, message: "菜品数量不能为空", trigger: "blur" },
    ],
    price: [{ required: true, message: "菜品单价不能为空", trigger: "blur" }],
  },
});

const { queryParams, form, rules } = toRefs(data);

const orderList = ref([]);
const shopList = ref([]);

const userList = ref([]);
let myChart = null;
const echartsRef = ref(null);
//获取用户列表
const getUserList = async () => {
  const { rows } = await listUser({ pageNum: 1, pageSize: 10000 });

  userList.value = rows.filter((v) => v.roleIds[0] === 6);
};
/** 查询订单项表列表 */
const getList = async () => {
  loading.value = true;
  const { rows } = await listUser({ pageNum: 1, pageSize: 10000 });
  const response = await listOrders({ pageNum: 1, pageSize: 10000 });

  // 遍历数组并计数
  let userIdCounts = {};
  response.rows.forEach((user) => {
    if (userIdCounts[user.remark]) {
      userIdCounts[user.remark]++;
    } else {
      userIdCounts[user.remark] = 1;
    }
  });
  // 将计数对象转换为所需格式的对象数组
  let result = Object.keys(userIdCounts).map((remark) => ({
    remark,
    num: userIdCounts[remark],
  }));
  result.map((item) => {
    rows.map((v) => {
      if (item.remark == v.userId) {
        item.userName = v.userName;
      }
    });
  });
  setTimeout(() => {
    initChart(result);
  }, 1000);
  total.value = response.total;
  loading.value = false;
};

getList();

const handleResize = () => myChart?.resize();
const initChart = (data) => {
  myChart.setOption({
    title: {
      text: "员工销售分析",
      left: "center",
    },
    xAxis: {
      type: "category",
      data: data.map((item) => item.userName),
    },
    yAxis: {
      name:"数量",
      type: "value",
    },
    series: [
      {
        data: data.map((item) => item.num),
        type: "bar",
      },
    ],
  });
};

onMounted(() => {
  myChart = echarts.init(echartsRef.value);
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  myChart?.dispose();
});

// 根据id查询用户
const findUserById = async (id) => {
  const current = userList.value.filter((v) => v.userId === id)[0];
  return current.userName;
};

getUserList();
// 获取订单列表
const getOrderList = async () => {
  const response = await listOrders();
  orderList.value = response.rows;
};

getOrderList();

// 获取菜品列表
const getShopList = async () => {
  const response = await listDishes();
  shopList.value = response.rows;
};
getShopList();

// 根据id查询菜品名称
const findShopById = async (id) => {
  const response = await listDishes();
  const current = response.rows.filter((v) => v.dishId == id)[0];
  return current.name;
};
</script>
